<template>
  <div :class="['autoGrow', 'messageItem']">
    <div class="textReply replyContent" v-if="+reply.msgtype===1" @click="click" v-html="emojiParse(reply.content.replace(/\n/gi,'<br />'))">
    </div>
    <div class="imageReply replyContent" v-else-if="+reply.msgtype===2" @click="click">
      <img :src=" reply.src?config.apiUrl+reply.src: ('data:image/png;base64,' + (reply.data||reply.content))"/>
    </div>
    <div class="imageReply replyContent" v-else-if="+reply.msgtype===3" @click="click">
      <img :src="reply.src || reply.tempUrl"/>
    </div>
    <div class="textReply replyContent" v-else-if="+reply.msgtype===4" @click="click">
      {{ reply.content }}
    </div>
    <div class="linkReply flex-column replyContent" v-else-if="+reply.msgtype === 10"  @click="click">
      <div class="linkTitle">{{reply.title}}</div>
      <div class="linkContent flex-row">
        <div class="linkDesc fontGrey">{{reply.content}}</div>
        <img :src="reply.src" class="linkCover">
      </div>
    </div>
    <div class="contactReply replyContent" v-else-if="+reply.msgtype===13" @click="click">
      <div style="padding:0 10px;background-color:#fff;border-radius: 5px">
      <div class="flex-row" style="align-items: center;padding:10px 0">
        <img :src="reply.src" style="width:40px !important;height:40px !important;border-radius:3px;background-color:#ddd;margin-right:10px" alt="">
        <div class="flex-column" style="overflow:hidden">
          <span class="textEllipsis" style="color:#333;font-size:14px;">{{ reply.title }}</span>
          <span class="textEllipsis" style="color:#aaa;font-size:12px;margin-top:6px">{{ reply.wxid }}</span>
        </div>

      </div>
      <div style="border-top:1px solid #ddd;padding:10px 0;color:#aaa;font-size:12px;">
        {{ (reply.content||reply.wxid||'').startsWith('gh_')?'公众号名片':'个人名片' }}<span style="float:right" v-if="reply.sendstatus">{{wechatCode[reply.sendstatus]}}</span>
        <!-- 个人名片<span style="float:right" v-if="reply.sendstatus">{{wechatCode[reply.sendstatus]}}</span> -->
      </div>
      </div>

    </div>
    <div class="textReply replyContent" v-else @click="click">
      {{ reply.content }}
    </div>
    <i  v-if="deletable"
      class="layui-icon layui-icon-close deleteMessage"
      @click.stop="deleteMessage"></i>
  </div>
</template>
<script>
import emojiParse from '@/lib/wechat-emoji'
import wechatCode from '@/lib/wechat-code'
import { mapActions, mapMutations, mapState } from 'vuex';

export default {
  name: 'message',
  props: {
    reply: {
      type: Object
    },
    active: {
      type: Boolean
    },
    deletable: {
      type: Boolean,
      default: true,
    }
  },
  data(){
    return { wechatCode }
  },
  computed:{
    ...mapState(['currentService','chatMap','uistate','accountMap'])
  },
  methods: {
    ...mapActions(['wsSend']),
    ...mapMutations(['updateChat','addMessageMap','addMessageListMap']),
    click() {
      this.$emit('click', this.reply)
    },
    deleteMessage() {
      this.$emit('delete', this.reply)
    },
    emojiParse
  }
}
</script>
<style scoped>
.messageItem {
  margin: 6px 0;
  padding: 6px 20px 6px 6px;
  position: relative;
}
.messageItem .deleteMessage {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  font-size: 18px;
  display: none;
}
.messageItem .replyContent {
  margin-bottom: 0 !important;
}
.messageItem:hover .deleteMessage{
  display: block;
  cursor: pointer;
}
.activeMessage {
  background: #f5f5f5;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
}
.textReply{
  padding: 12px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ccc;
  max-width: 250px;
  word-break: break-all;
  background: #A0E75A;
}
.documentsQuickReplyDialog .linkDesc{
  flex-shrink: unset
}
.documentsQuickReplyDialog .linkContent{
  flex-shrink: unset
}
.linkContent .linkCover{
  flex-shrink: 0;
  background: #eee
}
.quickReplies .linkReply .linkDesc{
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 30px;
    line-height: 15px;
    font-size: 12px;
}
</style>
